<template>
  <div>
    <textarea v-model="value" rows="20"> </textarea>
    <hr />
    <button @click="onVueCoder">错误日志出码</button>
    <button @click="onDSLCoder">DSL出码</button>
    <button @click="onCollectContext">Test Collect Context</button>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { vueCoder, Collecter } from '@vtj/engine/shared';

  const textareaCacheKey = '__vtj_dev_code__';

  const value = ref(localStorage.getItem(textareaCacheKey) || '');

  watch(value, (v) => {
    localStorage.setItem(textareaCacheKey, v);
  });

  const onVueCoder = async () => {
    const json = JSON.parse(value.value || '{}');

    const dsl = json.dsl;
    const componentMap = json.componentMap;
    const packages = json.packages;
    const result = await vueCoder(dsl, componentMap, packages, (e) => {
      console.log('error:--------------');
      console.log(e);
    });
    console.log(result);
  };

  const onDSLCoder = async () => {
    const dsl = JSON.parse(value.value || '{}');
    const result = await vueCoder(dsl, {}, [], (e) => {
      console.log('error:--------------');
      console.log(e);
    });
    console.log(result);
  };

  const onCollectContext = async () => {
    const dsl = JSON.parse(value.value || '{}');
    const collecter = new Collecter(dsl, []);
    collecter.walkNodes(dsl);
    console.log(collecter.context);
    // console.log(result);
  };
</script>
<style lang="scss" scoped>
  textarea {
    width: 100%;
  }
</style>
